<template>
  <el-dialog v-dialogDrag :visible.sync="dialog" width="930px" :close-on-click-modal="false" :before-close="reset">
    <span slot="title" class="dialog-title">调控设置</span>
    <div>
      <el-form ref="reffromDate" :disabled="readOnly" :inline="true" :model="fromDate" label-width="180px">
        <div class="title">结算办法：</div>
        <el-form-item prop="paymentMethodId" label="结算方式：">
          <el-select ref="paymentMethod" v-model="fromDate.paymentMethodId" placeholder="请选择" @change="$nextTick(()=>{fromDate.paymentMethod = $refs.paymentMethod.selectedLabel})">
            <el-option label="双控" value="0"></el-option>
            <el-option label="图结" value="1"></el-option>
            <el-option label="实结" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="settlementCycle" label="对账截止日：">
          <el-input v-model="fromDate.settlementCycle" type="Number" oninput="if(value>31||value<1)value=31">
            <template slot="prepend">每月</template>
            <template slot="append">号</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="checkTime" label="对账时限：">
          <el-input v-model="fromDate.checkTime" type="Number" oninput="if(value>31||value<1)value=31">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>
        <div>
          <div style="padding-bottom: 10px;">
            <el-button size="mini" class="bottom_all" style="margin-left: 0;" @click="addItem0(1)">
              <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
              添加
            </el-button>
          </div>
          <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="fromDate.phaseList0" tooltip-effect="dark">
            <el-table-column label="供应阶段" align="center" prop="brand" width="auto">
              <template slot-scope="scope">
                <span v-if="scope.row.id==2">{{scope.row.supplyPhase}}</span>
                <el-input v-else v-model="scope.row.supplyPhase" style="width: 100%;text-align: center;" :controls="false"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="办理结算天数" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.item" type="Number" style="width: 100%;text-align: center;" @change="itemFun(scope.row)"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="left" prop="specification" width="100">
              <template slot-scope="scope">
                <el-button v-if="scope.row.id!=2" size="mini" class="bottom_two" @click="delItem0(scope.$index)">
                  <i class="icon iconfont iconicon_button_delete" style="font-size: 12px;"></i>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="title">付款办法：</div>
        <el-form-item label="结清时限：" prop="settlementTimeLimit">
          <el-date-picker v-model="fromDate.settlementTimeLimit" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="paymentDays" label="账期：">
          <el-input v-model="fromDate.paymentDays" type="Number">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>
        <div>
          <div style="padding-bottom: 10px;">
            <el-button size="mini" class="bottom_all" style="margin-left: 0;" @click="addItem2()">
              <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
              添加
            </el-button>
          </div>
          <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="fromDate.engineeringPhaseList" tooltip-effect="dark" highlight-current-row @current-change="engineeringPhaseIdChange">
            <el-table-column label="选择" width="55">
              <template slot-scope="scope">
                <el-radio v-model="engineeringPhaseId" :label="scope.row" @change="engineeringPhaseIdChange(scope.row)">{{""}}</el-radio>
              </template>
            </el-table-column>
            <el-table-column label="工程阶段" align="center" prop="brand" width="auto">
              <template slot-scope="scope">
                <el-input v-model="scope.row.supplyPhase" class="FZTcenter" style="width: 100%;"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="应收比例" align="center">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.item" class="FZTcenter" style="width: 100%;" :min="1" :max="100" :controls="false"><template slot="append">%</template></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="left" prop="specification" width="100">
              <template slot-scope="scope">
                <el-button size="mini" class="bottom_two" @click="delItem2(scope.row,scope.$index)">
                  <i class="icon iconfont iconicon_button_delete" style="font-size: 12px;"></i>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="bottom_all_two" @click="reset">取 消</el-button>
      <el-button v-if="!readOnly" class="bottom_all" style="margin-left: 24px" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { queryControl, saveControl, savePhase } from "@/api/internetSales/engineeringControl.js";
import { setTimeout } from 'timers';
let loading = false
export default {
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    low: {
      type: Object,
      default: new Object()
    },
    readOnly: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      fromDate: {
        id: '',
        engineeringId: '',
        paymentMethod: '',
        paymentMethodId: '',
        settlementCycle: '',
        progressPaymentCycle: '',
        paymentDays: '',
        progressPaymentRatio: '',
        settlementTimeLimit: '',
        increasePaymentRatio: '',
        supplyPhase: '',
        supplyPhaseId: '',
        endStatementDay: '',
        phaseList: [],
        phaseList0: [],
        engineeringPhaseList: [],
        engineeringPhase: '',
        engineeringPhaseId: '',
        checkTime: '',
      },
      engineeringPhaseId: '',
    }
  },
  watch: {
    dialog() {
      if (this.dialog) {
        this.engineeringPhaseId = ''
        queryControl({ engineeringId: this.low.id }).then(res => {
          for (let key in this.fromDate) {
            this.fromDate[key] = res.data[key]
          }
          this.fromDate.phaseList0 = JSON.parse(JSON.stringify(this.fromDate.phaseList))
          this.fromDate.phaseList0.push({
            id: 2,
            supplyPhase: '供应完毕',
            item: this.fromDate.endStatementDay,
          })
          setTimeout(() => {
            this.engineeringPhaseId = this.fromDate.engineeringPhaseList.find((res) => res.id == this.fromDate.engineeringPhaseId)
          }, 100)
        }).catch(() => {
          this.reset()
        })
      }
    },
  },
  methods: {
    engineeringPhaseIdChange(val) {
      this.engineeringPhaseId = val
      this.fromDate.engineeringPhase = val.supplyPhase
      this.fromDate.engineeringPhaseId = val.id
    },
    itemFun(row) {//供应完毕赋值
      if (row.id == 2) {
        this.fromDate.endStatementDay = row.item
      }
    },
    reset() {
      this.$emit('reset', 'dialog3')
    },
    submit() {
      console.log(1);
      this.$refs.reffromDate.validate((valid) => {
        if (valid) {
          let arr = JSON.parse(JSON.stringify(this.fromDate.phaseList0))
          console.log(JSON.parse(JSON.stringify(arr)))
          arr.splice(arr.length - 1, 1)
          console.log(JSON.parse(JSON.stringify(arr)))
          let update = arr.filter((res) =>
            this.fromDate.phaseList.some((item) => res.id == item.id)
          );
          let deleteData = this.fromDate.phaseList.filter(
            (res) => !update.some((item) => res.id == item.id)
          );
          deleteData.forEach((res) => {
            res.status = 0; //0是删除
          });
          let addData = arr.filter(
            (res) => !update.some((item) => res.id == item.id)
          );
          this.fromDate.phaseList = [...update, ...deleteData, ...addData];
          saveControl(this.fromDate).then(res => {
            if (res.code == 1001) {
              this.$message({
                message: '保存成功',
                type: "success",
              });
            }
            this.$emit('submit', 'dialog3')
          })
        } else {
          return false;
        }
      });

    },
    addItem0() {
      const data = {
        supplyPhase: '',
        engineeringId: this.low.id,
        item: '',
        type: 1,
        status: 1
      }
      this.fromDate.phaseList0.splice(this.fromDate.phaseList0.length - 1, 0, data)
    },
    delItem0(index) {
      this.fromDate.phaseList0.splice(index, 1)
      console.log(JSON.parse(JSON.stringify(this.fromDate.phaseList0)))
    },
    addItem2() {
      if (loading) {
        return
      }
      loading = true
      const data = {
        supplyPhase: '',
        engineeringId: this.low.id,
        item: 1,
        type: 2
      }
      savePhase(data).then(res => {
        this.fromDate.engineeringPhaseList.push(res.data[res.data.length - 1])
        loading = false
      }).catch(() => {
        loading = false
      })
    },
    delItem2(row, index) {
      if (loading) {
        return
      }
      loading = true
      savePhase({ id: row.id, status: 0, engineeringId: row.engineeringId, type: 2 }).then(() => {
        this.fromDate.engineeringPhaseList.splice(index, 1)
        loading = false
      }).catch(() => {
        loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  font-weight: bold;
  font-size: 18px;
  padding-bottom: 18px;
}
.el-input,
.el-select {
  width: 240px;
}
</style>


